import { Component, SkipSelf } from '@angular/core';
import { Flower } from '../flower';
import { CLViewComponent } from './c-lview.component';

@Component({
  selector: 'app-b-lview',
  standalone: true,
  imports: [CLViewComponent],
  providers: [
    {
      provide: Flower,
      useValue: new Flower('🌺'),
    },
  ],
  viewProviders: [
    {
      provide: Flower,
      useValue: new Flower('🌻'),
    },
  ],
  template: `
    B <code>provider</code>: 🌺
    <div
      class="p-2 m-2 border-2 border-dashed border-green-400 rounded-lg width-28rem"
    >
      <p>B <code>viewProvider</code>: 🌻</p>
      <br />
      <span class="bg-amber-200">
        B (<code>&#64;SkipSelf</code>):
        {{ flower.name }}
      </span>
      <br />
      <app-c-lview [prefix]="prefixB" />
    </div>
    <ng-content></ng-content>
  `,
  styles: `
    :host {
      display: block;
      @apply p-2 m-2 mb-4 border-2 border-green-600 rounded;
      width: 30rem;
    }
    .width-28rem {
      width: 28rem;
    }
  `,
})
export class BLViewComponent {
  prefixB = "B's view";
  constructor(@SkipSelf() public flower: Flower) {}
}
